<template>
<!-- 首页左侧边栏 -->
    <div class="centerLeft" ref="centerLeft">
        <!-- 顶部多边形区域 -->
        <div class="top-box">
            <div class="polygon">
                <div class="text">
                    <div class=""></div>
                    <div></div>
                </div>
                <svg class="tag" viewBox="0 0 120 60">
                    <polyline points="8,0 112,0 120,8 120,52 112,60 8,60 0,52 0,8 8,0"
                    style=" fill:#409EFF; fill-opacity:0.2; stroke:#409EFF; stroke-width:2; stroke-opacity:0.9 "/>
                </svg>
            </div>
            <div class="polygon">
                <div class="text"></div>
                <svg class="tag" viewBox="0 0 120 60">
                    <polyline points="8,0 112,0 120,8 120,52 112,60 8,60 0,52 0,8 8,0"
                    style=" fill:#409EFF; fill-opacity:0.2; stroke:#409EFF; stroke-width:2; stroke-opacity:0.9 "/>
                </svg>
            </div>
            <div class="polygon">
                <div class="text"></div>
                <svg class="tag" viewBox="0 0 120 60">
                    <polyline points="8,0 112,0 120,8 120,52 112,60 8,60 0,52 0,8 8,0"
                    style=" fill:#409EFF; fill-opacity:0.2; stroke:#409EFF; stroke-width:2; stroke-opacity:0.9 "/>
                </svg>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="content-box">
            <!-- 1.商业分析区域 -->
            <div class="title" style="margin-top:0.1rem">
                <!-- 标题 -->
                <div class="text-1">
                    <i class="el-icon-crop" style="margin-right:0.075rem;"></i>
                    <span>商业分析</span>
                </div>
            </div>
            <!-- 内容 -->
            <div class="high-content">
                <div class="high-top">
                    <div class="high-top-items">
                        <span>当日全区销售额： 53.3（万元）</span>
                    </div>
                    <div class="high-top-items">
                        <span>南区销售额： 43.3（万元）</span>
                    </div>
                    <div class="high-top-items">
                        <span>北区销售额： 10（万元）</span>
                    </div>
                </div>
                <div class="high-bottom">
                    <div class="high-bottom-title" style="padding-left:0.075rem;">
                        <i class="el-icon-crop"></i>
                        <span>客流量</span>
                    </div>
                    <div class="high-bottom-content">
                        <dv-scroll-ranking-board :config="config" style="width:90%;height:100%"/>
                    </div>
                </div>
                
            </div>

            <!-- 2.人流统计区域 -->
            <div class="title" style="margin-top:0.1rem">
                <!-- 标题 -->
                <div class="text-1">
                    <i class="el-icon-crop" style="margin-right:0.075rem;"></i>
                    <span>人流统计</span>
                </div>
            </div>
            <!-- 内容 -->
            <div class="content">
                <lineChart2></lineChart2>
            </div>

            <!-- 3.交通分析区域 -->
            <div class="title" style="margin-top:0.1rem">
                <!-- 标题 -->
                <div class="text-1">
                    <i class="el-icon-crop" style="margin-right:0.075rem;"></i>
                    <span>未来车流预测</span>
                </div>
            </div>
            <!-- 内容 -->
            <div class="content">
                <lineChart3></lineChart3>
            </div>
        </div>
    </div>
</template>

<script>
import lineChart2 from '../components/echart/lineChart2'
import lineChart3 from '../components/echart/lineChart3'

export default {
    data(){
        return{
            // 排名轮播表数据
            config:{
                data: [
                    {name: '小吃店', value: 55123},
                    {name: '礼品店', value: 12022},
                    {name: '服装店', value: 78932},
                    {name: '汽修店', value: 63411},
                    {name: '百货店', value: 44231}
                ],
                unit: '单位',
                valueFormatter ({ value }) {
                    console.warn(arguments)
                    const reverseNumber = (value + '').split('').reverse()
                    let valueStr = ''

                    while (reverseNumber.length) {
                        const seg = reverseNumber.splice(0, 3).join('')
                        valueStr += seg
                        if (seg.length === 3) valueStr += ','
                    }

                    return valueStr.split('').reverse().join('')
                }
            },
        }
    },
    computed:{
        isShow(){
            return this.$store.state.clIsShow
        }
    },
    watch:{
        isShow(){
            classie.toggle( this.$refs.centerLeft, 'menu-open')
        }
    },
    methods:{
        
    },
    components:{
        lineChart2,
        lineChart3
    }
}
</script>

<style lang="less" scoped>
.centerLeft{
    width: 5.4rem;
    height: 100%;
    position: fixed;
    left: -6rem;
    transition: 0.2s;
    .top-box{
        width: 100%;
        height: 0.8rem;
        display: flex;
        justify-content: space-between;
    }
    .content-box{
        position: relative;
        width: 100%;
    }
    // 多边形框
    .polygon{
        position: relative;
        width: 1.6rem;
        height: 0.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .tag{
            width: 100%;
            height: 90%;
        }
    }

    // 左对齐标题
    .text-1{
        font-size: 0.225rem;  //大标题字号 0.225rem
        position: absolute;
        top:50%;
        left: 2%;
        transform: translate(0,-50%);
    }
    // 标题的渐变背景
    .title{
        position: relative;
        width: 100%;
        height: 0.35rem;
        background: -webkit-linear-gradient(left,rgba(64,158,255,0.8),rgba(64,158,255,0.1));
    }

    // 盒子1
    .high-content{
        position: relative;
        width: 100%;
        height: 4.6rem;
        margin-top: 0.1rem;
        background-color: rgba(64,158,255,0.2);
        border: 0.025rem solid rgba(64,158,255,0.6);
        box-shadow: inset 1px 1px 20px rgb(64,158,255);
        .high-top{
            width: 100%;
            height: 36%;
            display: flex;
            flex-wrap: wrap; //换行
            justify-content: center;
            .high-top-items{
                width: 94%;
                height: 0.425rem;
                margin-top: 0.1rem;
                border: 0.025rem solid rgba(64,158,255,0.6);
                line-height: 0.425rem;
                font-size:0.175rem;
            }
        }
        .high-bottom{
            width: 100%;
            height: 64%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .high-bottom-title{
                width: 94%;
                height: 0.36rem;
                margin-top: 0.1rem;
                line-height: 0.36rem;
                font-size: 0.2rem;  //内部标题字号 0.2rem
                position: relative;
                background: -webkit-linear-gradient(left,rgba(64,158,255,0.8),rgba(64,158,255,0));
            }
            .high-bottom-content{
                width: 94%;
                height: 80%;  
            }
        }  
    }
    // 盒子2
    .content{
        position: relative;
        width: 100%;
        height: 2.5rem;
        margin-top: 0.1rem;
        background-color: rgba(64,158,255,0.2);
        border: 0.025rem solid rgba(64,158,255,0.6);
        box-shadow: inset 1px 1px 20px rgb(64,158,255);
    }
}
.centerLeft.menu-open{
  left: 0.2rem;
  transition: 0.2s;
}
</style>